<template>
    <div class="center">
        <div class="topBox">
            <p style="font-size: 20px;">总访问量</p>
            <span v-for="item in visibilityDigits" :key="item">{{ item }}</span>
        </div>
        <div class="centerBox">
            <!-- <div class="cube-chart-container" ref="chartRef"></div> -->
            <div class="container">
                <div class="basic one">
                    <div class="side side1"></div>
                    <div class="side side4"></div>
                    <div class="side side5"></div>
                </div>
                <p style="top: 93%;left: 57%;">
                    <span>微信</span>
                    <span style="font-size: 30px; font-weight: 900; color: #22c3c0;">{{ wechat }}</span>
                </p>
                <div class="basic two">
                    <div class="side side1"></div>
                    <div class="side side4"></div>
                    <div class="side side5"></div>
                </div>
                <p style="top: 128%;left: 26%;">
                    <span>抖音</span>
                    <span style="font-size: 30px; font-weight: 900; color: #22c3c0;">{{ douyin }}</span>
                </p>
                <div class="basic three">
                    <div class="side side1"></div>
                    <div class="side side4"></div>
                    <div class="side side5"></div>
                </div>
                <p style="top: 162%;left: 57%;">
                    <span>其他</span>
                    <span style="font-size: 30px; font-weight: 900; color: #22c3c0;">{{ other }}</span>
                </p>
                <div class="basic four">
                    <div class="side side1"></div>
                    <div class="side side4"></div>
                    <div class="side side5"></div>
                </div>
                <p style="top: 128%;right: -3px;">
                    <span>微博</span>
                    <span style="font-size: 30px; font-weight: 900; color: #22c3c0;">{{ weibo }}</span>
                </p>
            </div>
        </div>
        <div class="bottomBox">
            <BorderBox2>
                <dv-border-box-4 :reverse="true" :color="['#0b254f', '#0b254f']">
                    <div style="padding:20px;">
                        <dv-border-box-12 style="width: 94%;padding: 18px 25px;font-weight: 900;font-size: 20px;"
                            :color="['#02a7f0', '#02a7f0']">本年每月问题统计</dv-border-box-12>
                    </div>
                    <!-- 柱状图 -->
                    <div id="charts" style="width: 96%; height: 264px;"></div>
                </dv-border-box-4>
            </BorderBox2>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
// import 'echarts-gl';
// const chartRef = ref(null);
// let chart = null;
const wechat = ref(12342);
const douyin = ref(11341);
const other = ref(12344);
const weibo = ref(12345);

const visibilityTotal = ref(123451); // 初始值
const visibilityDigits = ref([1, 2, 3, 4, 5, 1]);
let visibilityTimer = null;
visibilityTimer = setInterval(() => {
    visibilityTotal.value++;
    visibilityDigits.value = visibilityTotal.value.toString().split('');
    wechat.value++;
    douyin.value++;
    other.value++;
    weibo.value++;
}, 1000);

onMounted(() => {
    var ChartDom = document.getElementById('charts');
    var myChart = echarts.init(ChartDom);
    var option;
    // 模拟数据
    const data = [4100, 3700, 4700, 4100, 2600, 2200, 2900, 2600, 3700, 4700, 4100, 3300];
    // 定义渐变色（从黄色到青色）
    const gradientColor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
            { offset: 0, color: '#ffeb3b' }, // 顶部黄色
            { offset: 1, color: '#00bcd4' }  // 底部青色
        ]
    };
    option = {
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: '#ffffff'
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            max: 5000,
            axisLine: {
                lineStyle: {
                    color: '#80c0e0'
                }
            },
            axisLabel: {
                color: '#ffffff'
            },
            splitLine: {
                lineStyle: {
                    color: '#80c0e0',
                    type: 'solid'

                }
            },
            axisTick: {
                show: false
            }
        },
        series: [
            {
                type: 'bar',
                data,
                itemStyle: {
                    color: gradientColor,
                    borderRadius: [5, 5, 0, 0] // 顶部圆角
                },
                barWidth: '60%',
                label: {
                    show: false
                }
            }
        ]
    }
    option && myChart.setOption(option);
    // initChart();
    // window.addEventListener('resize', handleResize);
});

// onBeforeUnmount(() => {
//     if (chart) chart.dispose();
//     window.removeEventListener('resize', handleResize);
// });

// const handleResize = () => {
//     if (chart) chart.resize();
// };

// const initChart = () => {
//     const dom = chartRef.value;
//     if (!dom) return;

//     chart = echarts.init(dom);

//     const option = {
//         tooltip: {
//             show: true,
//             formatter: (params) => {
//                 return `${params.name}: ${params.value}`;
//             },
//         },

//         // 设置 3D 视角
//         visualMap: {
//             show: false,
//             min: 0,
//             max: 15000,
//             calculable: true,
//             color: ['#4096ee', '#f44336'],
//         },
//         xAxis3D: {
//             type: 'value',
//             name: 'X',
//             splitLine: { show: false },
//         },
//         yAxis3D: {
//             type: 'value',
//             name: 'Y',
//             splitLine: { show: false },
//         },
//         zAxis3D: {
//             type: 'value',
//             name: 'Z',
//             splitLine: { show: false },
//         },
//         grid3D: {
//             // viewControl: {
//             //     alpha: 45,              // 视角俯仰角，匹配示例倾斜度
//             //     beta: 45,               // 视角旋转角
//             //     distance: 300,          // 观察距离
//             //     rotateSensitivity: 0,   // 禁止旋转
//             //     zoomSensitivity: 0      // 禁止缩放
//             // },
//             view3D: {
//                 rotate: 45,
//                 zoom: 1.2,
//                 center: [0, 0, 0],
//             }
//         },
//         series: [
//             {
//                 type: 'bar3D',
//                 coordinateSystem: 'cartesian3D',
//                 // 四立方体布局，匹配示例位置分布
//                 data: [
//                     { value: 12363, name: '微信' },
//                     { value: 12378, name: '抖音' },
//                     { value: 12996, name: '微博' },
//                     { value: 12355, name: '其他' },
//                 ],
//                 label: {
//                     show: true,
//                     position: 'top',
//                     formatter: (params) => {
//                         return params.data.name+'\n'+params.data.value;

//                     },
//                     textStyle: {
//                         color: '#ffffff',       // 白色文字，匹配示例
//                         fontSize: 14,
//                         fontWeight: 'bold',
//                         backgroundColor: 'transparent' // 无背景
//                     },
//                     distance: 10              // 文字与立方体距离
//                 },
//                 itemStyle: {
//                     color: '#00a868',
//                     opacity: 0.8,
//                     borderColor: '#007b4d',
//                     borderWidth: 1,
//                 },
//                 barGap: '30%',  // 立方体间距，匹配示例间距
//                 barCategoryGap: '30%',  // 类别间距，匹配示例间距
//                 shading: 'lambert',  // 开启 lambert 阴影，增强立体感
//                 light: {
//                     mainColor: '#fff',
//                     ambient: 0.3,
//                     shadow: true,
//                     shadowBlur: 10,
//                     shadowColor: '#000',
//                 },

//                 barSize: [40, 40],  // 立方体尺寸，匹配示例大小
//                 // bevelSize: 5,       // 边缘倒角，增强立体感
//                 bevelSmoothness: 2  // 倒角平滑度
//             }
//         ],


//     };

//     chart.setOption(option);
// };
</script>

<style lang="scss" scoped>
.center {
    padding: 10px;
    width: 100%;

    .topBox {
        width: 620px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        span {
            padding: 15px 10px;
            background-color: #183a90;
            font-weight: 900;
            font-size: 22px;
        }
    }

    .centerBox {
        width: 620px;
        height: 500px;

        .container {
            transform: scale(0.8) translate(-15%, -75%);
            position: relative;
            height: 300px;
            p {
                position: absolute;
                font-size: 22px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;

            }
        }

        .basic {
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: relative;
        }

        .one {
            transform: translate3d(300px, 300px, 0) rotateX(-35deg) rotateY(45deg);
        }

        .two {
            transform: translate3d(300px, 300px, 0) rotateX(-35deg) rotateY(45deg);
        }

        .three {
            transform: translate3d(110px, 0, 0) rotateX(-35deg) rotateY(45deg);
        }

        .four {
            transform: translate3d(470px, -200px, 0) rotateX(-35deg) rotateY(45deg);

        }

        .side {
            border: 1px solid rgba(22, 189, 218, 0.3);
            position: absolute;
            top: 0;
            left: 0
        }

        .side1 {
            width: 200px;
            height: 300px;
            transform: translateZ(100px);
            background: linear-gradient(to bottom, rgba(52, 199, 225, 0.3), transparent);
            border-bottom: none;
        }

        .side4 {
            width: 200px;
            height: 300px;
            transform: rotateY(90deg) translateZ(-100px);
            background: linear-gradient(to bottom, rgba(52, 199, 225, 0.3), transparent);
            border-bottom: none;

        }

        .side5 {
            width: 200px;
            height: 200px;
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgba(52, 199, 225, 0.3);
        }

    }

    .bottomBox {
        width: 620px;
        height: 400px;
    }

}
</style>